{% extends 'base.html'%}
{% load static %}
{% load get %}

{% block title %}
    <title>教务管理</title>
{% endblock %}

{% block head_extras %}
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<style type="text/css">
    text.highcharts-credits{
        display: none;
    }
    .chart_container{
        width:400px;
    }
    td ,th{
        vertical-align: middle;
        text-align: center;
    }
    thead{
        background-color: #7fdfd4;
        color:#eeeeee;
        font-size: 14px;
    }
    .table td{
        color:#777777;
        font-size:15px;
        height: 53px;
        width: 1000px;
        background-color:#fafaf6;
    }
    div.btn-group{
        margin-left: 78%;

    }
    .row{
        padding-left: 1.5%;
        padding-right: 1%;
    }
    .chart_container{
        float:left;
    }
</style>

{% endblock %}

{% block content %}
<div class="btn-group" >
    {%if request.user.is_staff%}
        <button id='staff_download' type="button" class="btn btn-large btn-info">下载成绩</button>
        <input type="file" id="file" />
        <input class= 'btn btn-large btn-info ' type="button" id="btn" value="上传成绩" onclick="GetFile();" />
    {% else %}
        <button id='user_download' type="button" class="btn btn-large btn-info">下载成绩</button>
    {% endif %}
    <div class="btn-group">
        <button class="btn btn-large btn-info disabled">{{ chart_type }}</button>
        <button class="btn btn-large btn-info  dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a  {% if request.user.is_staff %} 
                        href="/useraccount/course_detail/{{ pk }}/" 
                    {% else %}
                        href="/useraccount/points/" 
                    {% endif %}><i class="i"></i> 表格</a></li>
            <li><a {% if request.user.is_staff %} 
                        href="/useraccount/course_detail/{{ pk }}/?chart_type=pie" 
                    {% else %}
                        href="/useraccount/points/?chart_type=pie" 
                    {% endif %}><i class="i"></i> 饼形图</a></li>
            <li><a {% if request.user.is_staff %} 
                        href="/useraccount/course_detail/{{ pk }}/?chart_type=bar" 
                    {% else %}
                        href="/useraccount/points/?chart_type=bar" 
                    {% endif %}><i class="i"></i> 条形图</a></li>
        </ul>
    </div>
</div>
<hr/>
{%  ifequal chart_type 'pie' %}
    <div id='good' class="chart_container"></div>
    <div id='normal' class="chart_container"></div>
    <div id='failed' class="chart_container"></div>
{% endifequal %}
{% ifequal chart_type 'table' %}
    {% if not request.user.is_staff %}
        <div class="row">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th colspan=4><strong>成绩汇总</strong></th>
                        </tr>
                        <tr>
                            <th>学年学期</th>
                            <th>门数</th>
                            <th>总学分</th>
                            <th>平均绩点</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for score in term_score %}
                        <tr>
                            {% for x in score %}
                            <td>{{x }}</td>
                            {% endfor %}
                        </tr>
                        {% endfor %}
                        <tr>
                            <td><strong>在校汇总</strong></td>
                            {% for score in all_score  %}
                            <td>{{score}}</td>
                            {% endfor %}
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <hr>
        <div class="row">
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                    <th colspan=14><strong>成绩列表</strong></th>
                    </tr>
                    <tr>
                        <th>学年学期</th>
                        <th>课程代码</th>
                        <th>课程编号</th>
                        <th>课程名称</th>
                        <th>课程类别</th>
                        <th>学分</th>
                        <th>期中成绩</th>
                        <th>期末成绩</th>
                        <th>平时成绩</th>
                        <th>补考成绩</th>
                        <th>总评成绩</th>
                        <th>实验成绩</th>
                        <th>最终</th>
                        <th>绩点</th>
                    </tr>
                </thead>
                <tbody>
                    {% for score in userscores %}
                    <tr>
                        <td>{{ score.course.school_term }}</td>
                        <td>{{ score.course.code }}</td>
                        <td>{{ score.course.numbering }}</td>
                        <td>{{ score.course.name }}</td>
                        <td>{{ score.course.category.name }}</td>
                        <td>{{ score.course.credit }}</td>
                        <td>{% if score.midterm %}{{ score.midterm }}{% endif %}</td>
                        <td>{% if score.final_exam %}{{ score.final_exam }}{% endif %}</td>
                        <td>{% if score.usual %}{{ score.usual }}{%endif%}</td>
                        <td>{% if score.retest %}{{ score.retest }}{% endif %}</td>
                        <td>{% if score.total_score %}{{ score.total_score }}{% endif %}</td>
                        <td>{% if score.experimental %}{{ score.experimental }}{% endif %}</td>
                        <td>{% if score.total_score %}{{ score.total_score }}{% endif %}</td>                        
                        <td>{% if score.points %}{{ score.points }}{% endif %}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
    <div class="row">
            <div  class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>英文名</th>
                            <th>学号</th>
                            <th>期中考试成绩</th>
                            <th>期末考试成绩</th>
                            <th>平时成绩</th>
                            <th>实验成绩</th>
                            <th>补考成绩</th>
                            <th>总分</th>
                            <th>绩点</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for score in userscores %}
                        <tr>
                            <td>{{ score.user.name }}</td>
                            <td>{{ score.user.username }}</td>
                            <td>{{ score.user.stuId }}</td>
                            <td>{% if score.midterm %}{{ score.midterm }}{% endif %}</td>
                            <td>{% if score.final_exam %}{{ score.final_exam }}{% endif %}</td>
                            <td>{% if score.usual %}{{ score.usual }}{%endif%}</td>
                            <td>{% if score.experimental %}{{ score.experimental }}{% endif %}</td>                        
                            <td>{% if score.retest %}{{ score.retest }}{% endif %}</td>
                            <td>{% if score.total_points %}{{ score.total_score }}{% endif %}</td>
                            <td>{% if score.points %}{{ score.points }}{% endif %}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
    </div>
    {% endif %}
{% endifequal %}
{% ifequal chart_type 'bar' %}
<div id='bar'></div>
{% endifequal %}
{% endblock %}

{% block js_extras %}
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/data.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/drilldown.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

<style type="text/css">
    #file{ display:none;}
</style>
<script>
function GetFile() {
    $("#file").click();
    var formData = new FormData();
    formData.append('file',$('#file').get(0).files[0]);
    $.ajax({
        url: '/useraccount/course_detail/{{ pk }}/',
        type: 'POST',
        cache: false,
        data:  formData,
        processData: false,
        contentType: false,
    }).done(function(res){}).fail(function(res){});
}
$("#staff_download").click(function(){
    window.location=('/useraccount/course_detail/{{ course.id }}/?download=True');
    });
$("#user_download").click(function(){
    window.location=('/useraccount/points/?download=True');
    });

$('#courses').addClass('active');

$(function () {
    $('#good').highcharts({
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
        title: {
            text: '优秀 ({{ chart.good }})'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        },
        series: [{
            type: 'pie',
            name: '占比',
            data: [
                ['85-89',   {% widthratio chart.good_first chart.good 100%}],
                ['90-94',   {% widthratio chart.good_second chart.good 100%}],
                ['95-99',   {% widthratio chart.good_third chart.good 100%}],
                ['100',     {% widthratio chart.perfect chart.good 100%}],

            ]
        }]
    });
});
$(function () {
    $('#normal').highcharts({
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
        title: {
            text: '良好 ({{ chart.normal }})'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        },
        series: [{
            type: 'pie',
            name: '占比',
            data: [
                ['60-69',   {% widthratio chart.normal_first chart.normal 100%}],
                ['70-79',   {% widthratio chart.normal_second chart.normal 100%}],
                ['80-84',   {% widthratio chart.normal_third chart.normal 100%}],
            ]
        }]
    });
});
$(function () {
    $('#failed').highcharts({
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
        title: {
            text: '不及格 ({{ chart.failed }})'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        },
        series: [{
            type: 'pie',
            name: '占比',
            data: [
                ['0-19',   {% widthratio chart.failed_first chart.failed 100%}],
                ['20-39',   {% widthratio chart.failed_second chart.failed 100%}],
                ['40-59',   {% widthratio chart.failed_third chart.failed 100%}],
            ]
        }]
    });
});

$(function () {
    // Create the chart
    Highcharts.chart('bar', {
        chart: {
            type: 'column'
        },
        title: {
            text: '成绩分布'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            title: {
                text: '数量'
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y}'
                }
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
        },
        series: [{
            name: '分布范围',
            colorByPoint: true,
            data: [{
                name: '不及格',
                y:  {{ chart.failed }},
                drilldown: '0-59'
            }, {
                name: '良好',
                y: {{ chart.normal }},
                drilldown: '60-84'
            }, {
                name: '优秀',
                y:  {{ chart.good }},
                drilldown: '85-100'
            }, ]
        }],
        drilldown: {
            series: [{
                name: '0-59',
                id: '0-59',
                data: [
                    [
                        '0-19',
                        {{ chart.failed_first }}
                    ],
                    [
                        '20-39',
                        {{ chart.failed_second }}
                    ],
                    [
                        '40-59',
                        {{chart.failed_third }}

                    ],
                ]
            }, {
                name: '60-84',
                id: '60-84',
                data: [
                    [
                        '60-69',
                        {{chart.normal_first }}

                    ],
                    [
                        '70-79',
                        {{chart.normal_second }}

                    ],
                    [
                        '80-84',
                        {{chart.normal_third }}
                    ],
                ]
            }, {
                name: '85-100',
                id: '85-100',
                data: [
                    [
                        '85-89',
                        {{chart.good_first }}

                    ],
                    [
                        '90-94',
                        {{chart.good_second }}

                    ],
                    [
                        '95-99',
                        {{chart.good_third }}

                    ],
                    [
                        '100',
                        {{chart.perfect }}

                    ],
                ]
            }, ]
        }
    });
});
</script>
{% endblock %}